<template>
  <div class="">
    <div v-if="classHistoryData.length === 0" class="f14 pad15 mt20 ta-c c-666">
      您暂无报班历史信息
    </div>
    <v-loadmore v-else :top-method="loadTop" :bottom-method="loadBottom"
      :bottom-all-loaded="allLoaded"
      :auto-fill="false" ref="loadmore">
      <div class="add-class-history-item" v-for='(item,index) in classHistoryData' :key='index'>
        <!-- time -->
        <!-- checkinStatus 报班状态 -->
        <!-- 10-申请取消;20-已取消;30-已安排;40-未安排;50-已失效(过期) -->
        <div class="main-time bor-bottom">
          <div class="flex l-center a-left">
            <img class="icon-time mr15" :src="staticImgData.timeUrl" alt="">
            <div class="f14 c-445c95 ta-l line-h32">
              {{item.gmtCreate| formatDate}}
            </div>
          </div>
          <div  v-if="item.checkinStatus ==='40'" style="width:.6rem;">
            <p class="min-btn bgc-01a4f6" @click="cancelClick(item)">取消</p>
          </div>
          <p v-else-if="item.checkinStatus ==='50'" class="c-1E90FF">已失效</p>
          <!-- <p v-else-if="item.checkinStatus ==='40'" class="c-1E90FF">未安排</p> -->
          <p v-else-if="item.checkinStatus ==='30'" class="c-1E90FF">已安排</p>
          <p v-else-if="item.checkinStatus ==='20'" class="c-1E90FF">已取消</p>
          <p v-else-if="item.checkinStatus ==='10'" class="c-1E90FF">申请取消中</p>
        </div>
        <!-- fill-box -->
        <div class="fill-box  bor-bottom">
          <div class="fill-item fill-b">
            <i class="mr25 bgc-1e90ff "></i>
            <div class="fill-input bor-bottom">
              <div>{{item.departRegion}}</div>
            </div>
            <div style="clear:both;"></div>
          </div>
          <div class="fill-item">
            <i class="mr25 bgc-ff9b7b "></i>
            <div class="fill-input">
              <div>{{item.destRegion}}</div>
            </div>
            <div style="clear:both;"></div>
          </div>
        </div>
        <!-- input -->
        <div class="input-cells bor-bottom">
          <div class="f-fl input-label">当前位置</div>
          <div class="cell-input">{{item.checkinAddr}}</div>
        </div>
        <div class="input-cells bor-bottom ">
          <div class="f-fl input-label">可装载台数</div>
          <div class="cell-input">{{item.amtExp}}台</div>
        </div>
        <div class="input-cells">
          <div class="f-fl input-label">计划装车时间</div>
          <div class="cell-input">{{item.gmtExpLoad | formatDate}}</div>
        </div>
        <!-- 间隔 -->
        <div class="mo-spacing"></div>

      </div>
    </v-loadmore>
  </div>
</template>

<script type="text/ecmascript-6">
import * as AddClassApi from '@/api/addClass'
import { Toast, Loadmore } from 'mint-ui'
import Utils from '@/utils/util'
import * as ThreeStorage from '@/utils/store/token.js' // cookie local session 统一管理
export default {
  name: 'add_class_history_list',
  // props: ['classHistoryData2'],
  data() {
    return {
      staticImgData: {
        timeUrl: require('@/assets/image/v1/user/add_class_history/icon_time.png')
      },
      classHistoryData: [],
      page: {
        current: 1,
        size: 3,
        total: 1,
        condition: {
          driverId: ''
        }
      },
      loadingShow: false,
      allLoaded: false, // 是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
      scrollMode: 'auto' // 移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
    }
  },
  created() {
    this.loadPageList()
  },
  mounted() {
  },
  components: {
    'v-loadmore': Loadmore
  },
  filters: {
    formatDate(time) {
      const date = new Date(time)
      return Utils.formatTime(date, 'Y-M-D h:m:s')
    }
  },
  methods: {
    loadTop: function() { // 组件提供的下拉触发方法
      // 下拉加载
      this.loadingShow = true
      this.loadPageList()
      this.$refs.loadmore.onTopLoaded() // 固定方法，查询完要调用一次，用于重新定位
    },
    loadBottom: function() {
      // 上拉加载
      this.loadingShow = true
      this.getMore() // 上拉触发的分页查询
      this.$refs.loadmore.onBottomLoaded() // 固定方法，查询完要调用一次，用于重新定位
    },
    loadPageList: function() {
      // 查询数据
      const that = this
      const driver_Id = ThreeStorage.getDriverId()
      that.page = {
        current: 1,
        size: 3,
        total: 1,
        condition: {
          driverId: driver_Id
        }
      }
      that.loadingShow = true
      AddClassApi.getDriverAddClssInfo(that.page).then(res => {
        // 是否还有下一页，加个方法判断，没有下一页要禁止上拉
        if (res.code === 0) {
          that.classHistoryData = res.data.records
          if (that.page.current > 1) {
            that.isHaveMore(res.data)
          }
          that.loadingShow = false
        } else {
          console.warn('error', res)
          that.loadingShow = false
        }
        that.$nextTick(function() {
          that.scrollMode = 'touch'
        })
      }).catch(res => {
        this.loadingShow = false
        console.warn('error', res)
      })
    },
    getMore: function() {
      // 分页查询
      const that = this
      that.page.current = parseInt(that.page.current) + 1
      AddClassApi.getDriverAddClssInfo(that.page).then(res => {
        this.loadingShow = false
        if (res.code === 0) {
          that.classHistoryData = that.classHistoryData.concat(res.data.records)
          if (that.page.current > 1) {
            that.isHaveMore(res.data)
          }
        }
      }).catch(res => {
        this.loadingShow = false
        console.warn('error', res)
      })
    },
    isHaveMore: function(data) {
      // 是否还有下一页，如果没有就禁止上拉刷新
      const that = this
      const now_show_num = that.classHistoryData.length
      const get_total = data.total
      if (now_show_num < get_total) {
        // 展示的条数 小于 后端总条数 还可以下拉加载更多
        this.allLoaded = false
      } else if (now_show_num === get_total) {
        // 展示的条数 等于 后端总条数 没有更多数据 不能进行下拉加载
        this.allLoaded = true
        Toast({
          message: '没有更多数据了',
          duration: 1000
        })
      }
    },
    init: function() {
      const that = this
      const driver_Id = ThreeStorage.getDriverId()
      AddClassApi.getDriverAddClssInfo(driver_Id).then(res => {
        if (res.code === 0) {
          that.classHistoryData = res.data
        }
      }).catch(res => {
        console.warn('error', res)
      })
    },
    cancelClick: function(item) {
      const that = this
      const cancelCheckinParam = {
        tabindexIs: true,
        itemData: item
      }
      that.$emit('cancel-now-class', cancelCheckinParam) // 切换tabindex
    }
  }
}
</script>

<style scoped>
@import '../../../styles/util.css';
/* common */
.large-btn{
  border-radius: .08rem;
}
.cell-input{
  color: #000;
}
.input-label{
  color:#999;
}
.min-btn{
  border-radius:.04rem;
}
/* main */
.main-time{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .06rem .15rem;
}
.icon-time{
  width: .13rem;
  height: .13rem;
}
</style>
